<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-tickets"></i> 故事板</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button>
                <el-button type="primary" icon="delete" class="handle-del mr10" @click="add">添加新记录</el-button>
            </div>
            <el-table :data="data" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="title" label="标题" >
                </el-table-column>
                <el-table-column prop="intro" label="介绍" >
                </el-table-column>
                <el-table-column prop="img" label="logo" >
                        <template slot-scope="scope">
                            <img width="120px"  :src="scope.row.img"/>
                        </template>
                </el-table-column>
                <el-table-column prop="time" label="发布时间" >
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :total="totalpage">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="添加或编辑故事" :visible.sync="editVisible" width="40%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="标题">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="logo图片:">
                
                <div v-if="editVisible" class="crop-demo">
                        <img :src="logo"   class="pre-img"/>
                        <div class="crop-demo-btn">选择图片
                            <input class="crop-input" type="file" name="image" accept="image/*" @change="setImage1"/>
                        </div>
                </div>
            </el-form-item>
                <el-form-item label="介绍">
                    <el-input v-model="form.intro" type="textarea" rows="3"></el-input>
                </el-form-item>
                <el-form-item label="内容">
                        <el-input v-model="form.content" type="textarea" rows="7"/>
                    </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                url: '/api/getstory',
                tableData: [],
                cur_page: 1,
                multipleSelection: [],
                select_cate: '',
                select_word: '',
                del_list: [],
                asd:"<p>ssss</p>",
                totalpage:0,
                is_search: false,
                editVisible: false,
                delVisible: false,
                form: {
                 
                },
                logo:"",
                idx: -1
            }
        },
        created() {
            this.getData();
        },
        computed: {
            data() {
                return this.tableData
            }
        },
        methods: {
            setImage1(e){
                const file = e.target.files[0];
                if (!file.type.includes('image/')) {
                    return;
                }
                let formData = new FormData();
                formData.append('file', file);
                let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
                }
                this.$axios.post('/api/file', formData, config).then((res)=> {
                    
                        this.logo=res.data;
                })
               
            },
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                this.getData();
            },
            // 获取 easy-mock 的模拟数据
            getData() {
                // 开发环境使用 easy-mock 数据，正式环境使用 json 文件
            
                this.$axios.post(this.url, {
                    page: this.cur_page
                }).then((res) => {
                    console.log(res.data);
                    this.tableData = res.data.data;
                    this.cur_page=res.data.current_page,
                    this.totalpage=res.data.total
                })
            },
            add(){
                this.form = {}
                this.editVisible = true;
                this.logo=""
            },
            handleEdit(index, row) {
        
                Object.keys(row).forEach(key=>{
                    this.form[key]=row[key]
                })
                this.logo=row.img
                console.log(this.form);
                
                this.editVisible = true;
            },
            handleDelete(index, row) {
                this.idx = index;
                this.delVisible = true;
            },
            formatter(row, column) {
                return row.address;
            },
            delAll() {
                this.delVisible = false
                this.$axios.post("/api/delStory", {
                    page: this.cur_page,
                    id: this.multipleSelection
                }).then((res) => {
                    console.log(res.data);
                    this.tableData = res.data.data;
                    this.cur_page=res.data.current_page,
                    this.totalpage=res.data.total
                    this.$message.success('删除成功');
                })
                this.multipleSelection = [];
            },
            handleSelectionChange(val) {
                
                this.multipleSelection = [];
                val.forEach(element => {
                    this.multipleSelection.push(element.id)
                });
            },
            // 保存编辑
            saveEdit() {
                this.editVisible = false;
                this.$axios.post("/api/savestory", {
                    page: this.cur_page,
                    ...this.form,
                    logo:this.logo
                }).then((res) => {
                    console.log(res.data);
                    this.tableData = res.data.data;
                    this.cur_page=res.data.current_page,
                    this.totalpage=res.data.total
                })
               
            },
            // 确定删除
            deleteRow(){
                this.delVisible = false
                this.$axios.post("/api/delstory", {
                    page: this.cur_page,
                    id: this.tableData[this.idx].id
                }).then((res) => {
                    console.log(res.data);
                    this.tableData = res.data.data;
                    this.cur_page=res.data.current_page,
                    this.totalpage=res.data.total
                    this.$message.success('删除成功');
                })
               
            }
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
</style>
<style scoped>
    .content-title{
        font-weight: 400;
        line-height: 50px;
        margin: 10px 0;
        font-size: 22px;
        color: #1f2f3d;
    }
    .pre-img{   
        width: 100px;
        height: 100px;
        background: #f8f8f8;
        border: 1px solid #eee;
        border-radius: 5px;
    }
    .crop-demo{
        display: flex;
        align-items: flex-end;
    }
    .crop-demo-btn{
        position: relative;
        width: 100px;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        margin-left: 30px;
        background-color: #409eff;
        color: #fff;
        font-size: 14px;
        border-radius: 4px;
        box-sizing: border-box;
    }
    .crop-input{
        position: absolute;
        width: 100px;
        height: 40px;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
    }
</style>